<template id="home-content">
    <div class="container">
        <div class="topology">
            <dv-border-box-12>
                <topology ref="topologyRef" />
            </dv-border-box-12>
        </div>
        <div class="option">
            <div class="option-card" @click="handleInit">
                <el-icon class="icon"><Tools /></el-icon>
                <span>基础网络部署</span>
            </div>
            <div class="option-card" @click="handleDeploy">
                <el-icon class="icon"><Tools /></el-icon>
                <span>联邦中心服务器部署</span>
            </div>
            <div class="option-card" @click="handleAgent">
                <el-icon class="icon"><Tools /></el-icon>
                <span>联邦Agent部署</span>
            </div>
        </div>
    </div>
    <router-view />
</template>

<script>
import { Tools } from '@element-plus/icons-vue';
import Topology from "@/components/echarts/topology/SimpleTopology.vue";

export default {
    name: "Home",
    components: {
        Topology,
        Tools,
    },
    data() {
        return {
        };
    },
    methods: {
        handleInit() {
            this.$refs.topologyRef.initChart();
        },
        handleDeploy() {
            this.$refs.topologyRef.deployChart();
        },
        handleAgent() {
            this.$refs.topologyRef.agentChart();
        }
    }
};
</script>

<style scoped>
.container {
    display: flex;
    height: 70%;
    width: 100%;
    justify-content: center;
    margin: 20px;
    font-size: 30px;
}
.topology {
    width: 100%;
    flex: 3;
}
.option {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    padding: 20px;
}
.option-card {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80%;
    height: 120px;
    background: linear-gradient(to right, #2575fc, #5811cb);;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    padding: 0 20px;
    gap: 10px;
}

.option-card:hover {
    transform: scale(1.1); /* 鼠标悬停时放大按钮 */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* 增强阴影效果 */
}

.option-card:focus {
    outline: none;
}

.option-card:active {
    transform: scale(1.05); /* 点击时按钮稍微缩小 */
}
.option-card span {
    font-size: 30px;
    color: white;
    flex-grow: 1;
}
.icon {
    font-size: 32px;
    color: #df6717;
    font-weight: bold;
}
</style>
